<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__PUBLIC__/Admin/lib/html5.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Admin/lib/respond.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Admin/lib/PIE_IE678.js"></script>
    <![endif]-->
    <link href="__PUBLIC__/Admin/css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/Admin/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/Admin/css/style.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/Admin/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>图片列表</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 图片管理 <span class="c-gray en">&gt;</span> 图片列表 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="pd-20">
    <div class="text-c"> 日期范围：
        <input type="text" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}'})" id="logmin" class="input-text Wdate" style="width:120px;">
        -
        <input type="text" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d'})" id="logmax" class="input-text Wdate" style="width:120px;">
        <input type="text" name="" id="" placeholder=" 图片名称" style="width:250px" class="input-text">
        <button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜影音</button>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20"> <span class="l"><a href="javascript:;" onclick="select_plus()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> <a class="btn btn-primary radius" onclick="picture_add('添加影音','{:U('Admin/Media/media_add','','')}')" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加影音</a></span> <span class="r">共有数据：<strong>{$dataCount}</strong> 条</span> </div>
    </div>
    <div class="media_content">
         <foreach name="medialist" item="m">
             <if condition="$m['mtype'] eq 0">
         <div class="media_con_item music"><p>{$m['title']}</p>
              <div class="details_info">
                   <span class="arrow-left1">
                   </span>
                   <div class="details_content">
                        <h5>详细信息</h5>
                        <div class="intor">
                             <div class="row_span"><b>简</b></div>
                             {$m['intro']}
                        </div>
                        <div class="item">
                             <span class="item_t"><i class="type"></i>类别:</span><span class="item_con">{$m['type']}</span>
                        </div>
                       <div class="item">
                           <span class="item_t"><i class="keyword"></i>关键词:</span><span class="item_con">{$m['keyword']}</span>
                       </div>
                       <div class="item">
                           <span class="item_t"><i class="sort"></i>排序:</span><span class="item_con">{$m['sort']}</span>
                       </div>
                       <div class="item">
                           <span class="item_t"><i class="time"></i>创建时间:</span><span class="item_con">{$m['createtime']|date="Y-m-d",###}</span>
                       </div>
                       <div class="details_play music1">
                           <audio src="/{$m['filepath']}"></audio>
                           <div class="play_btn"><a href="javascript:;" onclick="blplay(this)"></a><span>我知道你不爱</span><div class="lrc noHas"><i class="down"></i></div></div>
                           <div class="time_progress">
                               <div class="timebox">5.01</div>
                               <div class="progressbar">
                                   <div class="progresss"></div>
                               </div>
                               <div class="timebox">6.01</div>
                           </div>
                       </div>
                   </div>
              </div>
         </div>
             <elseif condition="$m['mtype'] eq 1" />
                 <div class="media_con_item video" style="background: url('{$m['fileScreen']}'); background-size: 100% 100%;"><p>{$m['title']}</p>
                     <div class="details_info">
                   <span class="arrow-left1">
                   </span>
                         <div class="details_content">
                             <h5>详细信息</h5>
                             <div class="intor">
                                 <div class="row_span"><b>简</b></div>
                                 {$m['intro']}
                             </div>
                             <div class="item">
                                 <span class="item_t"><i class="type"></i>类别:</span><span class="item_con">{$m['type']}</span>
                             </div>
                             <div class="item">
                                 <span class="item_t"><i class="keyword"></i>关键词:</span><span class="item_con">{$m['keyword']}</span>
                             </div>
                             <div class="item">
                                 <span class="item_t"><i class="sort"></i>排序:</span><span class="item_con">{$m['sort']}</span>
                             </div>
                             <div class="item">
                                 <span class="item_t"><i class="time"></i>创建时间:</span><span class="item_con">{$m['createtime']|date="Y-m-d",###}</span>
                             </div>
                             <div class="details_play music1">
                                 <div class="play_btn"><a href="javascript:;"></a><span>{$m['name']}</span></div>
                             </div>
                         </div>
                     </div>
                 </div>
             </if>
          </foreach>

    </div>
</div>
<script type="text/javascript" src="__PUBLIC__/Admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Admin/lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="__PUBLIC__/Admin/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="__PUBLIC__/Admin/js/H-ui.js"></script>
<script type="text/javascript" src="__PUBLIC__/Admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/MinAjax.js"></script>
<script type="text/javascript">
    /*图片-添加*/
    function picture_add(title,url){
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }

    /*图片-编辑*/
    function picture_edit(title,url,id){
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }
    /*图片-删除*/
    function picture_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            var imglist_wrap = document.getElementsByClassName('imglist_wrap')[0];
            var par = obj.parentNode.parentNode.parentNode.parentNode;
            var pic_delURL = "{:U('Admin/picture/delImage','','')}";
            pic_delURL+='?id='+id;
            ajax({
                type:"GET",
                url:pic_delURL,
                dataType:'text',
                success:function(data){
                    if(data==1){
                        imglist_wrap.removeChild(par);
                        layer.msg('已删除!',{icon:1,time:1000});
                    }
                }
            })
//
        });
    }

    var video = '1';
    var timer = null;
    // 播放按钮
    function blplay(obj){
         var video = obj.parentNode.parentNode.getElementsByTagName('audio')[0];
         if(video.paused){
             video.play();
             obj.className = 'pause';
             // 监听播放状态
             timer = setInterval(function(){ addLenstenPlay(video); },1000);
         }else{
             video.pause();
             clearInterval(timer);
             obj.className = '';
         }
    }
    // 监听播放进度
    function addLenstenPlay(v){
         vDuration = v.duration;
         vCurrtent = v.currentTime;
         Scale = vCurrtent/vDuration;
         if(Scale==1){
              clearInterval(timer);
              console.log('end');
         }
         timea = data_format(vDuration);
         ctime = data_format(vCurrtent);
         time = [timea,ctime];
         uploadProgress(Scale,time);
    }

    //时间格式化函数
    function data_format(time){
        var h,s,m,remain;
        h= fill_zero(parseInt(time/3600));
        remain = time%3600;
        m = fill_zero(parseInt(remain/60));
        remain = fill_zero(parseInt(remain%60));
        s = remain;
        return m+":"+s;
    }

    function fill_zero(num){
         if(num<=9){
             return "0"+num;
         }else{
             return ""+num;
         }
    }

    // 更新播放进度
    function uploadProgress(s,t){
         var timebox = document.getElementsByClassName('timebox');
         var progressbar = document.getElementsByClassName('progressbar')[0];
         var probar = progressbar.getElementsByTagName('div')[0];
         probar.style.width = s*100+"%";
         timebox[0].innerHTML = t[1];
         timebox[1].innerHTML = t[0];
    }
</script>
</body>
</html>